<template>
  <div id="echarts4"></div>
</template>
<script>
export default {
  data() {
    return {
      timeInterval: null,
    }
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts4()
  },
  created() {},
  beforeDestroy() {
    clearInterval(this.timeInterval)
  },
  methods: {
    showEcharts4() {
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      let xaxisData = this.data.map((v) => v.stree)
      let yaxisData = this.data.map((v) => v.num)
      // const getSymbolData = (datas) => {
      //   let arr = []
      //   for (var i = 0; i < datas.length; i++) {
      //     arr.push({
      //       value: datas[i],
      //       symbolPosition: 'end',
      //     })
      //   }
      //   return arr
      // }
      // const createSpirit = (data) => {
      //   const spiritGreen =
      //     'image://'
      //   const spiritOrange =
      //     'image://'
      //   let seriesData = []
      //   for (let i = 0; i < data.length; i++) {
      //     let spirit = spiritGreen
      //     if (i % 3 == 0 && i != 0) {
      //       spirit = spiritOrange
      //     }
      //     seriesData.push({
      //       value: data[i],
      //       symbol: spirit,
      //       symbolRepeat: 'fixed',
      //       symbolMargin: 0,
      //       symbolClip: true,
      //       symbolSize: [25, 41],
      //     })
      //   }
      //   return seriesData
      // }
      let option = {
        tooltip: {
          show: false,
        },
        yAxis: [
          {
            name: '(个)',
            nameTextStyle: {
              color: '#fff',
              fontWeight: 400,
              fontSize: 14,
            },
            axisLabel: {
              color: '#fff',
            },
            axisLine: {
              show: false,
              // symbol: ['none', 'rect'],
              // symbolSize: [6, 12],
              // lineStyle: {
              //   width: 2,
              //   color: '#537DAA',
              // },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
              // areaStyle: {
              //   color: ['rgba(7, 28, 47, 0.8)', 'rgba(10, 34, 56, 0.8)'],
              // },
            },
          },
        ],
        xAxis: {
          data: xaxisData,
          axisLabel: {
            color: '#fff',
            interval: 0,
          },
          axisLine: {
            show: true,
            symbol: ['none', 'rect'],
            symbolSize: [6, 12],
            lineStyle: {
              width: 2,
              color: '#537DAA',
            },
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          top: 28,
          left: 8,
          right: 8,
          bottom: 15,
          containLabel: true,
        },
        dataZoom: [
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个。
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: 18,
            data: yaxisData,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //颜色渐变
                {
                  offset: 0,
                  color: 'rgba(0, 255, 150, 1)', // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0, 255, 150, 0)', // 0% 处的颜色
                },
              ]),
            },
            //柱形图上方标题
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },
          },
        ],
      }
      //自动滚动
      this.timeInterval = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。
        //判断是否滑动到最后一条数据，若是，则重置柱状图（显示前6条数据）
        if (option.dataZoom[0].endValue == xaxisData.length) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        myChart.setOption(option)
      }, 1600)

      // myChart.setOption(option)
    },
  },
}
</script>
